<%--
  Created by IntelliJ IDEA.
  User: suikelei
  Date: 4/22/20
  Time: 11:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Dashboard | Nadhif - Responsive Admin Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
<%--    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>--%>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .fixed-table-toolbar{
            display:grid;
        }
    </style>
</head>

<body>
<h2>服务端口：${pageContext.request.localPort}</h2>
<h2>当前SessionId：${pageContext.session.id}</h2>
<div>
    <table id="mytab" class="table table-hover"></table>
</div>
<div id="toolbar" class="btn-group pull-right">
    <button id="btn_add" type="button" onclick="EditViewById()" class="btn btn-info btn-sm rightSize pull-right" >
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </button>
</div>
<script>
    $('#mytab').bootstrapTable({
        url: '/resume/all',
        toolbar: "#toolbar",
        sidePagination: "true",
        striped: true, // 是否显示行间隔色
        //search : "true",
        uniqueId: "ID",
        pageSize: "100",
        pagination: false, // 是否分页
        sortable: false, // 是否启用排序
        columns: [
            // {
        //     field: 'id',
        //     title: '登录名'
        // },

            {
                field: 'name',
                title: '姓名',
                align: 'center',
                width:300
            },
            {
                field: 'address',
                title: '地址',
                align: 'center',
                width:300
            },
            {
                field: 'phone',
                title: '手机',
                align: 'center',
                width:300
            },
            {
                field: '111',
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                formatter: actionFormatter
            },

        ]
    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {
        var id = row['id'];
        var result = "";
        result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
        result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
        return result;
    }
    function EditViewById(id) {
        if (id){
            $.ajax({
                url: '/resume/one?id='+id,
                type: 'GET',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    openDialog(data);
                }
            })
        }else {
            openDialog();
        }
    }
    function openDialog(data) {
        if (!data){
            data = {'id':'','address':'','name':'','phone':''};
        }
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            btn: ['保存','取消'],
            yes: function(index){
                $.ajax({
                    url: '/resume/save',
                    type: 'POST',
                    data: '{"id":"'+$('#f_id').val()+'","name":"'+$('#f_name').val()+'","address":"'+$('#f_address').val()+'","phone":"'+$('#f_phone').val()+'"}',
                    contentType: 'application/json;charset=utf-8',
                }).done(function(){
                    layer.close(index);
                    alert("保存成功");
                    $('#mytab').bootstrapTable('refresh');
                })
            },
            content: '<div style="padding: 10px">\n' +
                '    <div>\n' +
                '        <label>姓名</label><input type="text" id="f_name" name="name" value="'+data['name']+'">\n' +
                '    </div>\n' +
                '    <div>\n' +
                '        <input type="hidden" id="f_id" name="id" value="'+data['id']+'">\n' +
                '        <label>地址</label><input type="text" id="f_address" name="address" value="'+data['address']+'">\n' +
                '    </div>\n' +
                '    <div>\n' +
                '        <label>手机</label><input type="text" id="f_phone" name="phone" value="'+data['phone']+'">\n' +
                '    </div>\n' +
                '</div>'
        });
    }
    function DeleteByIds(id) {
        layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                url: '/resume/del?id='+id,
                type: 'GET',
                contentType: 'application/json;charset=utf-8',
                success: function (data) {
                    layer.close(index);
                    alert("删除成功");
                    $('#mytab').bootstrapTable('refresh');
                }
            })
        });


    }
</script>
</body>

</html>
